import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';

import { State } from '../../../store';
import { DrawTool } from '../../store';
import { DrawToolTypes, DrawToolActive, DrawToolDeactive, DrawToolMeasureAvailable, DrawToolBuffer, DrawToolInputMark } from '../../store/actions/draw-tool.action';
import * as fromDrawToolSelector from '../../store/selectors/draw-tool.selector';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'ege-draw-tool',
  templateUrl: './draw-tool.component.html',
  styleUrls: ['./draw-tool.component.scss']
})
export class DrawToolComponent implements OnInit {

  measureFormControl: FormControl = new FormControl(true);

  defaultBufferValue: number = 0;
  defaultUnitVlaue: string = 'kilometers';
  inputMarkVisible: boolean = false;
  bufferVisible: boolean = false;

  select$: Observable<DrawTool>;
  point$: Observable<DrawTool>;
  lineString$: Observable<DrawTool>;
  circle$: Observable<DrawTool>;
  rectangle$: Observable<DrawTool>;
  polygon$: Observable<DrawTool>;
  inputMark$: Observable<DrawTool>;
  buffer$: Observable<DrawTool>;
  remove$: Observable<DrawTool>;
  clean$: Observable<DrawTool>;

  constructor(
    private store: Store<State>
  ) { }

  ngOnInit() {
    this.select$ = this.store.select(fromDrawToolSelector.getDrawToolSelect);
    this.point$ = this.store.select(fromDrawToolSelector.getDrawToolPoint);
    this.lineString$ = this.store.select(fromDrawToolSelector.getDrawToolLineString);
    this.circle$ = this.store.select(fromDrawToolSelector.getDrawToolCircle);
    this.rectangle$ = this.store.select(fromDrawToolSelector.getDrawToolRectangle);
    this.polygon$ = this.store.select(fromDrawToolSelector.getDrawToolPolygon);
    this.inputMark$ = this.store.select(fromDrawToolSelector.getDrawToolInputMark);
    this.buffer$ = this.store.select(fromDrawToolSelector.getDrawToolBuffer);
    this.remove$ = this.store.select(fromDrawToolSelector.getDrawToolRemove);
    this.clean$ = this.store.select(fromDrawToolSelector.getDrawToolClean);
    this.store.select(fromDrawToolSelector.getDrawToolMeasureAvailable).subscribe(available => this.measureFormControl.setValue(available, { emitEvent: false }));
    this.measureFormControl.valueChanges.subscribe(value => this.store.dispatch(new DrawToolMeasureAvailable(value)));
  }

  setActive(type: string): void {
    this.store.dispatch(new DrawToolActive(<DrawToolTypes>type));
    if(type === DrawToolTypes.BUFFER) {
      this.bufferVisible = true;
    } else if(type === DrawToolTypes.INPUTMARK) {
      this.inputMarkVisible = true;
    }
  }

  setBuffer(event): void {
    this.hiddeBuffer();
    this.store.dispatch(new DrawToolBuffer(event));
  }

  hiddeBuffer(): void {
    this.bufferVisible = false;
    this.store.dispatch(new DrawToolDeactive(DrawToolTypes.BUFFER));
    this.store.dispatch(new DrawToolBuffer({ unit: 'kilometers', value: 0, clone: false }));
  }

  bufferVisibleChange(event): void {
    if(event === false) {
      this.hiddeBuffer();
    }
  }

  hiddeInputMark(): void {
    this.inputMarkVisible = false;
    this.store.dispatch(new DrawToolDeactive(DrawToolTypes.INPUTMARK));
    this.store.dispatch(new DrawToolInputMark(null));
  }

  inputMarkVisibleChange(event): void {
    if(event === false) {
      this.hiddeInputMark();
    }
  }

  setInputMark(event): void {
    this.store.dispatch(new DrawToolInputMark(event));
  }

}
